<!-- -->
<template>
  <div class='container'>
    <div class="top">
      <div class="hosname">{{ baseMap && baseMap.hosname }}</div>
      <div class="bigname">{{ baseMap && baseMap.bigname }}</div>
      <div class="deparment">{{ baseMap && baseMap.depname }}</div>
    </div>
    <div class="warp">
      <div class="time">{{ baseMap && baseMap.workDateString }}</div>
      <div class="container">
        <div @click='getItem(index, item)' :class="['items', item.status === -1 ? 'item1' : '', activeIndex === index ? 'cur' : '']" v-for='(item, index) in bookingScheduleList'>
          <div class="up">{{ item.workDate }} {{ item.dayOfWeek }}</div>
          <div class="down">{{ item.status === -1 ? '停止挂号' : item.status === 1 ? '即将放号' : item.status === 0 && item.availableNumber === -1 ? '无号' : `有号(${item.availableNumber})` }}</div>
        </div>
      </div>
      <el-pagination layout="prev, pager, next" @current-change='currentChange' :total="pagination.total" />
    </div>
    <div class="bottom">
      <div class="will" v-if='workTime.status === 1'>{{ dayjs().add(1, 'day').format('YYYY年MM月DD日') + ' 8:30 放号' }}</div>
      <div class="doctor" v-else>
        <div class="morning">
          <div class="tip">
            <svg t="1734077324586" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4351" width="32" height="32"><path d="M44.657778 722.488889h880.64v28.444444H44.657778zM168.96 839.964444h632.035556v28.444445H168.96zM863.573333 590.222222a168.391111 168.391111 0 0 0 20.764445-80.213333 178.346667 178.346667 0 0 0-182.328889-173.795556 182.897778 182.897778 0 0 0-166.4 102.968889 288.711111 288.711111 0 0 0-169.244445-54.328889A275.626667 275.626667 0 0 0 85.333333 654.222222h28.444445a247.182222 247.182222 0 0 1 253.44-239.502222 249.173333 249.173333 0 0 1 251.448889 209.92l3.697777 28.444444 20.48-20.764444a155.875556 155.875556 0 0 1 113.777778-46.933333A154.168889 154.168889 0 0 1 900.835556 682.666667l26.737777-9.671111a174.648889 174.648889 0 0 0-64-82.773334z m-222.151111 3.982222a265.386667 265.386667 0 0 0-82.773333-136.817777 153.6 153.6 0 0 1 142.222222-92.728889 149.902222 149.902222 0 0 1 153.884445 145.351111 139.377778 139.377778 0 0 1-16.782223 65.706667 188.871111 188.871111 0 0 0-197.688889 18.488888zM922.168889 567.608889l6.200889-27.761778 98.816 22.158222-6.229334 27.761778zM598.243556 211.655111l27.136-8.561778 29.269333 92.444445-27.136 8.590222z" p-id="4352" fill="#8a8a8a"></path><path d="M437.504 317.44l18.090667-21.959111 76.828444 63.317333-18.090667 21.959111zM783.36 298.865778l38.855111-85.447111 25.884445 11.776-38.855112 85.447111zM901.148444 395.605333l90.936889-43.264 12.231111 25.685334-90.936888 43.235555z" p-id="4353" fill="#8a8a8a"></path></svg>
            <span>上午号源</span>
          </div>
          <div class="doc_item" v-for='(item, index) in morningArr' :key='index'>
            <div class="left">
              <div class="info">
                <span>{{ item.title }}</span>
                <div class="line"></div>
                <span>{{item.docname}}</span>
              </div>
              <div class="skill">{{item.skill}}</div>
            </div>
            <div class="right">
              <div class="money">￥ <span>{{item.amount}}</span></div>
              <el-button style='width: 100px;' type='primary'>剩余 {{item.availableNumber}}</el-button>
            </div>
          </div>
        </div>
        <div class="afternoon">
          <div class="tip">
            <svg t="1734077561627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8488" width="32" height="32"><path d="M734.33 678.76a10 10 0 0 1-9.05-14.24A240.87 240.87 0 0 0 748 561.8c0-133.93-109-242.89-242.89-242.89s-242.89 109-242.89 242.89a242.09 242.09 0 0 0 14.92 84 10 10 0 0 1-18.76 6.92 261.92 261.92 0 0 1-16.16-91c0-145 117.93-262.89 262.89-262.89S768 416.84 768 561.8A260.84 260.84 0 0 1 743.4 673a10 10 0 0 1-9.07 5.76zM505.11 246.61a10 10 0 0 1-10-10V112.73a10 10 0 1 1 20 0v123.88a10 10 0 0 1-10 10zM184.48 567.23H60.6a10 10 0 1 1 0-20h123.88a10 10 0 1 1 0 20zM949.61 567.23H825.74a10 10 0 1 1 0-20h123.87a10 10 0 1 1 0 20zM278.39 340.52a10 10 0 0 1-7.07-2.93L183.72 250a10 10 0 0 1 14.14-14.14l87.59 87.59a10 10 0 0 1-7.07 17.07zM731.82 340.52a10 10 0 0 1-7.07-17.07l87.59-87.59A10 10 0 1 1 826.49 250l-87.59 87.59a10 10 0 0 1-7.08 2.93z" p-id="8489" fill="#8a8a8a"></path><path d="M963.4 678.73H63.24a10 10 0 1 1 0-20H963.4a10 10 0 1 1 0 20zM541.78 755H122.54a10 10 0 1 1 0-20h419.24a10 10 0 0 1 0 20zM781.82 921.27H234.59a10 10 0 1 1 0-20h547.23a10 10 0 1 1 0 20zM224.23 873h-64.65a10 10 0 0 1 0-20h64.65a10 10 0 1 1 0 20zM963.4 824.69H332.16a10 10 0 1 1 0-20H963.4a10 10 0 1 1 0 20z" p-id="8490" fill="#8a8a8a"></path></svg>
            <span>下午号源</span>
          </div>
          <div class="doc_item" v-for='(item, index) in afternoonArr' :key='index'>
            <div class="left">
              <div class="info">
                <span>{{ item.title }}</span>
                <div class="line"></div>
                <span>{{item.docname}}</span>
              </div>
              <div class="skill">{{item.skill}}</div>
            </div>
            <div class="right">
              <div class="money">￥ <span>{{item.amount}}</span></div>
              <el-button style='width: 100px;' type='primary'>剩余 {{item.availableNumber}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, computed } from 'vue'
import { getBookingScheduleRule, findScheduleList } from '@/api/path'
import { useRoute } from 'vue-router'
let route = useRoute()

let activeIndex = ref(0)
let baseMap: any = ref()
let bookingScheduleList: any = ref([])
let doc_lists: any = ref([])
let workTime: any = ref({})

let pagination = reactive({
  currentPage: 1,
  pageSize: 6,
  total: 0
})
const getDetails = async () => {
  activeIndex.value = 0
  let res:any = await getBookingScheduleRule(pagination, route.query)
  if (res.code === 200) {
    baseMap.value = res.data.baseMap
    bookingScheduleList.value = res.data.bookingScheduleList
    pagination.total = res.data.total
    workTime.value = bookingScheduleList.value[0]
    getScheduleList(workTime.value.workDate)
  } else {
    ElMessage.error(res.message)
  }
}

const getScheduleList = async (workDate: string) => {
  let res:any = await findScheduleList(route.query, workDate)
  console.log(res);
  if (res.code === 200) {
    doc_lists.value = res.data
  } else {
    ElMessage.error(res.message)
  }
}

let morningArr = computed(() => {
  return doc_lists.value.filter((item: any) => item.workTime === 0)
})
let afternoonArr = computed(() => {
  return doc_lists.value.filter((item: any) => item.workTime === 1)
})

const currentChange = (val: number) => {
  pagination.currentPage = val
  getDetails()
}

const getItem = (index: number, item:any) => {
  activeIndex.value = index
  console.log(activeIndex.value);
  workTime.value = item
  getScheduleList(item.workDate)
}

onMounted(() => {
  getDetails()
})
</script>

<style lang='scss' scoped>
.container {
  .top {
    display: flex;
    color: rgb(127, 127, 127);
    .hosname {
      position: relative;
    }
    .hosname:after {
      content: "";
      position: absolute;
      right: -13px;
      top: 4px;
      width: 5px;
      height: 18px;
      background-color: #55a6fe;
    }
    .bigname {
      margin: 0 20px;
      position: relative;
    }
    .bigname::after {
      content: '·';
      position: absolute;
    }
  }
  .warp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    .container {
      display: flex;
      width: 100%;
      .items {
        flex: 1;
        border: 1px solid #55a6fe;
        cursor: pointer;
        margin: 10px 5px;
        transition: all 0.3s;
        .up {
          background-color: #e8f2ff;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
        .down {
          text-align: center;
          height: 55px;
          line-height: 55px
        }
      }
      .cur {
        transform: scale(1.1)
      }
      .item1 {
        border: 1px solid #ccc;
        .up {
          background-color: #ccc;
        }
        .down {
          color: #7f7f7f;
        }
      }
    }
  }
  .bottom {
    .doctor {
      .tip {
        display: flex;
        align-items: center;
        span {
          margin-left: 10px;
          color: #7f7f7f;
          font-weight: bold;
        }
      }
      .doc_item {
        color: #7f7f7f;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        margin-top: 10px;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .info {
            color: #65c1fe;
            display: flex;
            align-items: center;
            .line {
              width: 2px;
              height: 18px;
              background-color: #65c1fe;
              margin: 3px 10px 0;
            }
          }
          .skill {
            font-size: 14px;
            margin-top: 10px;
          }
        }
        .right {
          display: flex;
          .money {
            margin-right: 15px;
            span {
              font-size: 14px;
            }
          }
        }
      }
      .afternoon {
        margin-top: 30px;
      }
    }
    .will {
      color: #55a6fe;
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      margin-top: 50px;
    }
  }
}

</style>
